<template>
  <div class="app-container">
    <!-- 父传子,将showBefore传给公共组件,让其进行渲染 -->
    <PageTools :show-before="true">
      <!-- 左边插槽 -->
      <template #before>
        共222条数据
      </template>
      <!-- 右边插槽 -->
      <template #after>
        <el-button size="small" type="danger" @click="$router.push('/employees/import')">导入</el-button>
        <el-button size="small" type="primary" @click="exportExcel">导出</el-button>
        <el-button size="small" type="warning" @click="isShowAddDialog=true">新增员工</el-button>
      </template>
    </PageTools>
    <!-- 放置表格和分页 -->
    <el-card>
      <el-table border :data="employeeList">
        <el-table-column label="序号" sortable="" type="index" />
        <el-table-column label="姓名" sortable="" prop="username" />
        <el-table-column label="工号" sortable="" prop="workNumber" />
        <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="formatEmploment" />
        <el-table-column label="部门" sortable="" prop="departmentName" />
        <!-- 入职时间使用过滤器进行样式格式化(布置全局过滤器) -->
        <el-table-column label="入职时间" sortable="" prop="timeOfEntry">
          <template v-slot="scope">
            {{ scope.row.timeOfEntry | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态" sortable="" prop="enableState">
          <template v-slot="scope">
            <!-- 通过作用域插槽可以获取到当前一行的数据,即遍历employeeList的item的数据 -->
            <!-- v-model:开关状态由什么决定 -->
            <!-- active-value:开关激活状态默认是true,可以更改为1 -->
            <!--  inactive-value:开关关闭状态默认是false,改为2-->
            <!-- disabled:不允许点击修改 -->
            <!-- active-color/inactive-color :激活和未激活时的开关颜色-->
            <el-switch
              v-model="scope.row.enableState"
              :active-value="1"
              :inactive-value="2"
              disabled
            />

          </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="280">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="$router.push('/employees/detail/'+scope.row.id)">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <!-- 点击出现弹窗,需要传入id,以获取点击的员工的信息 -->
            <el-button type="text" size="small" @click="ShowRole(scope.row.id)">角色</el-button>
            <el-button v-if="checkPerm('delEmployee')" type="text" size="small" @click="delFn(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="employeeSetting.size"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <AddEmployee :is-show-add-dialog="isShowAddDialog" @closeDialog="isShowAddDialog=false" />
    <!-- 分配角色页面 -->

    <AssignRole ref="assignRole" :is-show-dialog="isShowRole" />
  </div>
</template>

<script>
// import PageTools from '@/components/PageTools/index.vue'
import { getEmployee, delEmployee } from '@/api/employee'
import EmployeeEnum from '@/constant/employees'
import { export_json_to_excel } from '@/utils/Export2Excel'
import AddEmployee from './components/add-employee.vue'
// 员工页面的角色功能组件
import AssignRole from './components/assign-role.vue'

export default {
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      employeeList: [],
      employeeSetting: {
        page: 1,
        size: 5
      },
      total: 0,
      // 显示新增员工弹窗
      isShowAddDialog: false,
      // 分配角色弹窗
      isShowRole: false
    }
  },
  created() {
    this.loadPage()
  },
  methods: {
    // 封装是否具有按钮权限的函数,判断当前登录的员工是否拥有某个二级权限(type=2),如果么有,就不显示关于这个权限的操作按钮,比如当前角色无删除权限,就不显示删除按钮
    // checkPerm(pointName) {
    //   // 获取所有二级权限,然后跟当前登录员工的二级权限进行对比,判断他是否拥有该按钮对应的权限
    //   const points = this.$store.state.user.userInfo.roles.points
    //   // 判断当前登录用户是否有这个按钮的权限
    //   // pointName是需要判断的按钮的权限标识名
    //   return points.indexOf(pointName) !== -1
    // },
    // 关角色弹窗
    closeRoleDialog() {
      this.isShowRole = false
    },
    // 显示角色分配弹窗
    async ShowRole(id) {
      // 获取点击的员工的原有角色情况
      await this.$refs.assignRole.getUserDetail(id)
      this.isShowRole = true
    },
    // 删除员工
    async delFn(id) {
      // 二次确认
      await this.$confirm('确认删除?')
      // 发送删除请求
      await delEmployee(id)
      // 更新页面
      this.loadPage()
      // 提示用户
      this.$message.success('删除成功')
    },
    // 导出员工列表
    async exportExcel() {
      // 获取所有员工
      const res = await getEmployee({ page: 1, size: this.total })
      console.log(res.rows)
      // export_json_to_excel({
      //   header: ['姓名', '年龄'],
      //   data: [
      //     ['tom', 12]
      //   ]
      // })

      // const header = Object.keys(res.rows)
      // console.log(header)
      // 根据导出函数的要求,需要的数据格式是:header表头里是中文,data数据里是数据值
      const userRelations = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber'
      }
      // const header = Object.keys(res.rows[0])
      // console.log(header)
      const header = Object.keys(userRelations) // Object.keys方法获取到对象的所有key,即入职时间,手机号...
      // res.rows是所有员工列表合集,map遍历到的user是单独一个员工
      const data = res.rows.map(user => {
        const newArr = []
        // 遍历字典,将英文值(mobile)作为user里的键,以便获取到user里对应的值
        // user里:mobile:1380000002,我们需要获取到数值,然后填入到新数组newArr中,多个newArr组合成导出函数要求的data
        for (const key in userRelations) {
          // 获取到英文名称,对应user里的键(字典里的值是user里的键)
          const newKey = userRelations[key]
          newArr.push(user[newKey])
        }
        return newArr
      })
      export_json_to_excel({
        header,
        data
      })
    },
    // 将获取员工列表封装起来,需要多次调用
    async loadPage() {
      const res = await getEmployee(this.employeeSetting)
      // console.log(res)
      // console.log(this.employeeList)
      this.total = res.total
      // 服务器原因,有可能会少一个参数,所以在这做判断,缺少参数就加一个默认参数,避免出现参数不齐
      this.employeeList = res.rows.map(item => {
        return {
          ...item, enableState: item.enableState || 1
        }
      })
    },
    // 点击其他页面时
    async currentChange(newPage) {
      // 更新页码,发送请求
      // el-pagination的currentChange方法,会返回最新的页码
      this.employeeSetting.page = newPage
      // console.log(newPage)
      this.loadPage()
    },
    // 数据格式化,对聘用形式进行格式化
    formatEmploment(row, column, cellValue, index) {
      // 后台数据是1/2这种形式,我们需要变成实际文字显示在页面,其中cellValue表示这个格子里面的内容
      // if (Number(cellValue) === 1) {
      //   return '正式员工'
      // } else {
      //   return '临时背锅'
      // }
      // 枚举法,将数据的所有可能性都列举出来
      // const hireType = [
      //   { id: 1, value: '正式员工' },
      //   { id: 2, value: '临时背锅' }
      // ]
      // const obj = hireType.find(item => item.id === cellValue)
      // return obj.value
      // EmployeeEnum自定义名字,hireType根据文档constant决定,find方法判断,返回符合条件的item值
      const obj = EmployeeEnum.hireType.find(item => item.id === cellValue)
      // if (obj) {
      //   return obj.value
      // } else {
      //   return '未知形式'
      // }
      // 防御型编程,避免出现hiretype中没有的名称而出现报错,所以给一个默认值
      return obj ? obj.value : '未知形式'
    }
  }
}
</script>

<style>

</style>
